<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
  body{
	text-align:center;
  }
  #map_canvas{
	margin: 20px auto;
	border: 1px dashed #C0C0C0;
	width: 800px;
	height: 500px;
  }
	#geocode{
		position:absolute;
		left:10px;
		top:10px;
		width:250px;
		background-color:yellow;
	}
		#geocode2{
		position:absolute;
		left:10px;
		top:100px;
		width:250px;
		background-color:yellow;
	}
</style>

<script type="text/javascript">
  //将变量设置为全局变量方便方法调用
  var map, geocoder;
	var infowindow = new google.maps.InfoWindow();

  function initialize() {
		geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(30.33508, 114.17211);
    var myOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		//调用地址解析函数
		//codeAddress();
  }
	
	/*GeocoderResults 对象常量表示一个地址解析结果，并且是采用以下形式的对象：
	results[]: {   
	types[]: string,   
	formatted_address: string,   
	address_components[]: 
		{     
		short_name: string,     
		long_name: string,     
		types[]: string   
		},   
	geometry: 
		{     
		location: LatLng,     
		location_type: GeocoderLocationType     
		viewport: LatLngBounds,     
		bounds: LatLngBounds   
		}  
	}
	*/
	//地址解析函数
	function codeAddress() {
    var address = document.getElementById("address").value;
		/*对请求的内容进行地址解析，第一个参数是request对象，他的值是GeocoderRequest类型的,
			第二个参数是一个回调函数，这个函数也有两个参数，分别是GeocoderResult对象类型的数组和
			GeocoderStatus值，		
		*/
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
				//重新定位地图的中心
        map.setCenter(results[0].geometry.location);
				//设置地图，使其与指定范围相符
        map.fitBounds(results[0].geometry.viewport);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

	function codeLatLng() {
		var input = document.getElementById("latlngAddress").value;
		var latlngStr = input.split(",",2);
		var lat = parseFloat(latlngStr[0]);
		var lng = parseFloat(latlngStr[1]);
		var latlng = new google.maps.LatLng(lat, lng);
		if (geocoder) {
			geocoder.geocode({'latLng': latlng}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					if (results[1]) {
						map.setZoom(11);
						marker = new google.maps.Marker({
								position: latlng, 
								map: map
						}); 
						infowindow.setContent(results[1].formatted_address);
						infowindow.open(map, marker);
					}
				} else {
					alert("Geocoder failed due to: " + status);
				}
			});
		}
	}
</script>
</head>
<body onload="initialize()">
	<div id="geocode">请输入地名：
    <input id="address" type="textbox" value="武汉">
    <input type="button" value="Search" onclick="codeAddress()">
  </div>
		<div id="geocode2">请输入经纬度（用逗号隔开）：
    <input id="latlngAddress" type="textbox" >
    <input type="button" value="Search" onclick="codeLatLng()">
  </div>
  <div id="map_canvas"></div>
</body>
</html>